import Vue from 'vue'
const restrict = {
  // 状态无法满足点击条件，按钮置灰，参数可以是布尔类型，也可以是数组，数组第一项为布尔，第二项为提示词
  inserted(el, binding) {
    const { value } = binding
    let flag = value
    let text = '当前状态无法操作'
    if (Array.isArray(value)) {
      flag = value[0]
      text = value[1]
    }
    if (!flag) {
      let newEl = el.cloneNode(true)
      newEl.style.color = '#0000004D'
      newEl.style.cursor = 'not-allowed'
      newEl.title = text
      newEl.onclick = e => {
        stopDefault(e)
        // Vue.prototype.$message.error(text)
      }
      el.parentNode.replaceChild(newEl, el)
    }
  },
  update(el, binding) {
    const { value } = binding
    let flag = value
    let text = '当前状态无法操作'
    if (Array.isArray(value)) {
      flag = value[0]
      text = value[1]
    }
    if (!flag) {
      let newEl = el.cloneNode(true)
      newEl.style.color = '#0000004D'
      newEl.style.cursor = 'not-allowed'
      newEl.title = text

      newEl.onclick = e => {
        stopDefault(e)
        // Vue.prototype.$message.error(text)
      }
      if (el.parentNode) {
        el.parentNode.replaceChild(newEl, el)
      }
    }
  },
}
const install = function(Vue) {
  Vue.directive('restrict', restrict)
}
function stopDefault(e) {
  if (e && e.preventDefault) {
    e.preventDefault() // 阻止默认行为
    e.stopPropagation() // 防止冒泡
  }
}

if (window.Vue) {
  window['restrict'] = restrict
  Vue.use(install)
}

restrict.install = install
export default restrict
